<template>
  <div id="card" @click="showDetail">
    <div class="left">
      <img :src="this.img_url" alt="" width="115" class="photo" />
    </div>
    <div class="right">
      <!-- <label for="" >{{this.movie_id}}</label><br> -->
      <label for="">{{ this.moviename }}</label
      ><br />
      <van-rate
        v-model="value"
        readonly
        void-color="#eee"
        color="#ffd21e"
        allow-half
        void-icon="star"
        :size="13"
      />{{ this.grade }}<br />
      <label for="">{{ this.product_year }}</label
      ><br />
      主创演员：<label for="">{{ this.acts }}</label
      ><br />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "moviecard",
  props: [
    "moviename",
    "img_url",
    "grade",
    "jianjie",
    "movie_id",
    "product_year",
    "acts",
  ],
  data() {
    return {
      // address_moviename:moviename,
      image_url: "",
      value: this.grade / 2,
    };
  },
  methods: {
    showDetail() {
      console.log(this.movie_id);
      this.$router.push({
        name: "infoSearch",
        params: { movie_id: this.movie_id },
      });
    },
  },
  watch: {
    address_moviename() {
      this.$emit("update", newVal);
    },
  },
};
</script>

<style>
#card {
  width: 90%;
  /* height: 200px; */
  margin: 10px;
  box-shadow: 3px 3px 5px #b3afaf;
  display: inline-block;
  border-radius: 3px;
  font-size: 13px;
}
.left {
  width: 40%;
  float: left;
}
.right {
  width: 60%;
  float: left;
}
.photo {
  border-radius: 7px;
  box-shadow: 2px 2px 5px #b3afaf;
}
</style>
